<template>
  <!-- 选择商品 -->
  <view class="select-goods">
    <view class="loading">
      <u-loading mode="circle" :show="loading" size="50"></u-loading>
    </view>
		
		<!-- 没有数据 -->
		<view v-if="goodsList.length === 0" class="not-data">
			暂无数据
		</view>
		
    <!-- 列表 -->
    <view v-else class="goods-list" :class="!isSingleGoods ? 'pb-120' : ''">
      <template v-for="(item, i) in goodsList">
        <view :key="i" class="flex flex-ai-c" @click="selected(item)">
          <!-- 勾选框 -->
          <view v-if="!isSingleGoods" class="checkbox">
            <i-icon v-show="!item.checked" icon="icontuoyuan" size="40rpx" color="#9A9A9A"></i-icon>
            <i-icon v-show="item.checked" icon="icongouxuan" type="multiple" size="40rpx"></i-icon>
          </view>

          <!-- 商品 -->
          <view class="item">
            <view class="top-section flex flex-ai-c">
              <!-- 商品图片 -->
              <view class="pic-img">
                <image :src="item.goodImg + '!idx'" mode="widthFix" class="img"></image>
              </view>

              <!-- 商品信息、售价 -->
              <view class="info-text">
                <view class="text">{{ item.car_Type_Name }}{{ item.configuration_Name }}</view>
                <view class="price flex flex-ac-c flex-jc-sb">
                  <view>
                    <text class="price-text">车辆售价：</text>
                    <text class="price-num">{{ item.bus_Price }}</text>
                  </view>
                  <u-icon name="arrow-right" :size="24" color="#9A9A9A"></u-icon>
                </view>
              </view>
            </view>

            <view class="bottom-section flex flex-ai-c flex-jc-sb">
              <view class="price-cell">
                <text class="price-cell-text">指导价：</text>
                <text class="price-cell-num">{{ item.factory_Price }}</text>
              </view>

              <view class="price-cell">
                <text class="price-cell-text">优惠：</text>
                <text class="price-cell-num">{{ item.difference }}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>
    
    <!-- 多选的确定按钮 -->
    <view v-if="!isSingleGoods" class="confirm">
      <u-button type="primary" shape="circle" @click="confirm()">确定</u-button>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'

import b64img from './img.js'
export default {
  data() {
    return {
      loading: false, // 加载控制
      // 商品列表
      goodsList: [
        // {
        //   id: 1,
        //   goodImg: b64img,
        //   car_Type_Name: '奥迪 A6L',
        //   configuration_Name: '动感甄选班巴拉巴拉巴 拉巴拉巴拉',
        //   bus_Price: 25.35,
        //   factory_Price: 43.25,
        //   difference: 1448
        // }
      ],

      isSingleGoods: false, // 是否为单商品
      checkedList: [], // 多商品勾选的商品
      pageNow: 1, // 当前页
      
      tempStoreId: '4ffdf49c01e14fe699c719df593ea8f9', // 店铺id，临时调式
			topImg:'',
			storeName:'',
			companyName:''
		}
  },

  computed: {
    ...mapState({
      posterType: state => state.poster.posterType,
			storeId: state => state.userInfoDetail.store.storeId  // 店铺id
    })
  },
  onLoad(op){
    console.log(op)
    this.topImg = op.topImg
    this.storeName = op.storeName
    this.companyName = op.companyName
  },
  created() {
    this.isSingleGoods = this.posterType === '单品海报'
    this.getStoreGoodsList()
  },

  methods: {
    ...mapActions(['setGoodsData']),
    
    // 获取当前用户默认店铺的商品列表
    async getStoreGoodsList() {
      try {
        this.loading = true
        const { data } = await this.$api.marketing.GetCarSourceDataList({
          PageIndex: this.pageNow,
          PageSize: 10,
          Store_Id: this.storeId
          // Store_Id: this.tempStoreId
        })
        this.goodsList = data.list
        this.pageNow = data.currentPage + 1 // 累计当前页码
        
        this.goodsList = this.goodsList.map(g => ({ ...g, checked: false }))
        this.loading = false
      } catch (err) {
				console.log('hhgiiugiug',err)
        this.loading = false
      }
    },
    
    // 选择商品
    selected(itemData) {
      // 单品单选, else为多商品多选
      if (this.isSingleGoods) {
        this.setGoodsData([itemData]) // 单品的itemData为一个对象，所以需加[]号成数组传入
        uni.navigateTo({
          url: encodeURI('/pages_common/pages_me/singleGoodsPosters/singleGoodsPosters?topImg='+this.topImg+'&storeName='+this.storeName+'&companyName='+this.companyName),
          success: () => {}
        })        
      } else {
        this.handleChecked(itemData)
      }
    },
    
    // 多商品勾选处理
    handleChecked(itemData) {
      let isIndex = this.checkedList.findIndex(c => c.id === itemData.id)

      // 不能勾选超过3个商品
      if (this.checkedList.length === 3) {
        // 如果已勾选状态，则需要取消勾选
        if (!itemData.checked) return false

        itemData.checked = false
        this.checkedList.splice(isIndex, 1)
      } else {
        itemData.checked = !itemData.checked
        isIndex === -1 ? this.checkedList.push(itemData) : this.checkedList.splice(isIndex, 1)
      }
    },
    
    // 多商品确定
    confirm() {
			if (this.checkedList.length === 0) {
				uni.showToast({
					title: '请选择至少一个商品',
					icon: 'none',
					duration: 1000
				})
				return false
			}
      // 传入到vuex的store
      this.setGoodsData(this.checkedList)
      uni.navigateTo({
        url: encodeURI('/pages_common/pages_me/mutipleGoodsPosters/mutipleGoodsPosters?topImg='+this.topImg+'&storeName='+this.storeName+'&companyName='+this.companyName),
        success: () => {}
      }) 
    }
  }
}
</script>

<style lang="scss" scoped>
// 根节点样式
.select-goods {
  background-color: #f6f6f6;
  min-height: 100vh;
  
  .loading {
    text-align: center;
  }
	
	.not-data {
		text-align: center;
		font-size: 36rpx;
		color: #333;
	}
}

// 商品列表
.goods-list {
  padding: 24rpx;
  
  .checkbox {
    margin-right: 20rpx;
  }

  .item {
    flex: 1;
    margin-bottom: 24rpx;
    padding: 0 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.14);
  }

  .top-section {
    padding: 26rpx 0;
    // 商品图
    .pic-img {
      .img {
        width: 200rpx;
        height: 134rpx;
      }
    }

    // 商品信息
    .info-text {
      flex: 1;
      margin-left: 18rpx;

      .text {
        font-size: 30rpx;
        color: #343434;
      }

      .price {
        margin-top: 26rpx;

        .price-text {
          font-size: 26rpx;
          color: #666666;
        }
        .price-num {
          font-size: 34rpx;
          color: #eb5c02;
        }
      }
    }
  }

  .bottom-section {
    padding: 24rpx 0;
    border-top: 1px solid #eeeeee;

    .price-cell {
      &-text {
        font-size: 26rpx;
        color: #666;
      }

      &-num {
        font-size: 30rpx;
        color: #343434;
      }
    }
  }
}

.pb-120 {
  padding-bottom: 120rpx;
}

// 多选确定按钮
.confirm {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16rpx 24rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  
  & /deep/ .u-btn {
    color: #333;
    background: linear-gradient(127deg, #FFE23E, #FDD422);
    
    &.u-primary-hover {
      background: linear-gradient(110deg, #FFE23E, #FDD422) !important;
    }
  }
}
</style>
